<template>
	<div>
		<ul class="list">
			<li @click="jump('employee_clockin')">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-taozi"></use>
				</svg>
				<p>考勤打卡</p>
			</li>
			<li @click="jump('employee_salesreport')">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-xigua"></use>
				</svg>
				<p>销量上报</p>
			</li>
			<li @click="jump('employee_mysales')">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-ningmeng"></use>
				</svg>
				<p>我的销量</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "employee_modular",
    methods:{
      jump(index){
        this.$router.push({
          name:index
        }).catch(err=>err)
      }
    }
	}
</script>

<style scoped="scoped">
	ul,
	li,
	p {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.icon {
		width: 1.5em;
		height: 1.5em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.list {
		display: flex;
		padding-top:10px;
	}

	.list li {
		width: 40%;
		line-height: 35px;
		text-align: center;
		color:lightpink;
	}
	.list li:hover{
		background-color:lightpink;
		color:white;
	}
</style>
